<script setup lang="ts">
import lodash from 'lodash-es'

/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
defineOptions({
  name: "BillConfig",
  inheritAttrs: false,
});
import {ElLoading, UploadFile} from "element-plus";
import 'element-plus/theme-chalk/el-loading.css';
import {getDictOptions} from "@/api/dict";
import {getBillColumnList} from "@/api/bill";
import {getOrderColumnList} from "@/api/order";
import {saveColumnMatch, getBaseColumnList, deleteBaseColumn, check, billImport, billExport} from "@/api/baseColumnMatch";
import {getColumnMatchConditionList, deleteColumnMatchCondition} from "@/api/columnMatchCondition";
import {saveBillColumnMatch, getBillColumnMatchList, deleteBillColumn, billColumnMatchImport, billColumnMatchExport} from "@/api/billColumnMatch";
import {saveColumnAppend, getColumnAppendList, deleteColumnAppend} from "@/api/columnAppend";
import {saveSysMainSubNoConfig, getSysMainSubNoConfigForm} from "@/api/mainSubNoConfig";
import { BaseColumnMatchVO } from "@/api/baseColumnMatch/types";
import { ColumnMatchConditionVO } from "@/api/columnMatchCondition/types";
import { BillColumnMatchVO } from "@/api/billColumnMatch/types";
import { ColumnAppendVO } from "@/api/columnAppend/types";
import { CommonList } from "@/api/common/types";

const activeTab = ref('one')
const options: Ref<OptionType[]> = ref([]);
const dataFormRef = ref(ElForm);
const bsOmsFormRef = ref(ElForm);
const dialog = reactive<DialogOption>({
	visible: false,
});
const isBill = ref(true);  // 是否是账单配置
const platformKey = ref('') // 基础字段配置平台key
const baseColumnList = ref<BaseColumnMatchVO[]>([]);  // 基础字段配置列表
const standardColumnList = reactive<CommonList>({value: []})  // 标准字段列表
const sourceColumnList: Ref<OptionType[]> = ref([]); // 原始字段列表
const conditionDialog = reactive<DialogOption>({
	visible: false,
});
const tmBillConditionDialog = reactive<DialogOption>({
	visible: false,
});
// 天猫账单配置弹窗
const tmBillDialog = reactive<DialogOption>({
	visible: false,
});
// 账单配置导入弹窗
const tmBillImportDialog = reactive<DialogOption>({
	title: '账单配置导入',
	visible: false,
});
// 账单项目配置导入弹窗
const billProjectImportDialog = reactive<DialogOption>({
	visible: false,
});
// 百胜OMS交易号配置弹窗
const bsOmsDialog = reactive<DialogOption>({
	visible: false,
});
const excelFile = ref<File>();
const excelFilelist = ref<File[]>([]);
const columnConditionList = ref<ColumnMatchConditionVO[]>([]);  // 基础字段符合条件配置列表
const conditionSourceType = ref('') // 符合条件来源类型
const matchId = ref(0);
const billColumnList = ref<BillColumnMatchVO[]>([]);  // 账单项目配置列表
const billConditionDialog = reactive<DialogOption>({
	visible: false,
});
const billColumnConditionList = ref<ColumnMatchConditionVO[]>([]);  // 账单项目符合条件配置列表
const columnAppendList = ref<ColumnAppendVO[]>([]);  // 合并列配置列表
const billProjectList = reactive<CommonList>({value: []})  // 记账项目字段列表
const bsOmsForm = reactive<any>({})

const bsOmsRules = reactive({
	sourcePreformMainNo: [{ required: true, message: "请选择主订单号", trigger: "change" }],
	sourcePreformSubNo: [{ required: true, message: "请选择子订单号", trigger: "change" }],
});


// 打开配置弹窗
async function openDialog(platform?: string, typeName?: string, key?: string) {
	if (platform && typeName) {
		dialog.title = platform + typeName + "配置";
  } else {
	  dialog.title = "配置"
	}
	isBill.value = typeName === '账单'
	if (key) {
		platformKey.value = key
	}

	dialog.visible = true;
	activeTab.value = 'one'
	await getStandardColumnList()
	await getSourceColumnList()
	await getBaseColumn()
	if (isBill.value) {
		await getBillColumnMatchListHandle()
		await getColumnAppend()
	}
}

/**
 * 关闭弹窗
 */
function closeDialog() {
	check(platformKey.value).then((response) => {
		if (response.data) {
			ElMessageBox.confirm(
				response.data,
				{
					confirmButtonText: '继续编辑',
					cancelButtonText: '暂时关闭',
					type: 'warning',
					closeOnClickModal: false,
					closeOnPressEscape: false
				}
			)
				.then(() => {})
				.catch(() => {
					dialog.visible = false;
					resetForm();
				})
			}else{
				dialog.visible = false;
				resetForm();
		}
	})
}

/**
 * 重置表单
 */
function resetForm() {
	dataFormRef.value.resetFields();
	dataFormRef.value.clearValidate();
	// 清空列表
	standardColumnList.value = []
	sourceColumnList.value = []
	baseColumnList.value = []
	billColumnList.value = []
	columnAppendList.value = []
}

// 在列表开头添加一行基础字段配置
function addBaseColumnRow() {
	const baseColumnObj = reactive<BaseColumnMatchVO>({
			isUpdate: true,
			platformKey: platformKey.value,
	  	conditionFormList: []
	});
	baseColumnList.value.unshift(baseColumnObj)
}

// 获取标准字段列表
async function getStandardColumnList() {
	if (isBill.value) {
	  getBillColumnList().then((response) => {
			standardColumnList.value = response.data
		})
	}else{
	  getOrderColumnList().then((response) => {
			standardColumnList.value = response.data
	  })
	}
}

// 获取原始字段列表
async function getSourceColumnList() {
	getDictOptions(platformKey.value).then((response) => {
	  sourceColumnList.value = response.data;
	});
}

// 保存基础字段配置
function saveBaseColumn(index?: number) {
	const obj = lodash.nth(baseColumnList.value, index)
	saveColumnMatch(obj)
		.then((response) => {
			obj.isUpdate = false
			obj.id = response.data
			ElMessage.success("保存成功");
		});
}

// 获取基础字段配置列表
async function getBaseColumn() {
	getBaseColumnList(platformKey.value).then((response) => {
		baseColumnList.value = response.data
		if (baseColumnList.value && baseColumnList.value.length > 0) {
			for (const baseColumn of baseColumnList.value) {
				lodash.set(baseColumn, 'isUpdate', false)
		  	lodash.set(baseColumn, 'need', baseColumn.dataGeneration === '通过计算')
			}
		}
	})
}

// 删除基础字段配置
function handleDeleteBaseColumn(index?: number) {
	const obj = lodash.nth(baseColumnList.value, index)
	ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		if (obj && obj.id) {
			deleteBaseColumn(obj.id).then(() => {
				ElMessage.success("删除成功");
		  	lodash.pullAt(baseColumnList.value, index)
			});
		}else{
			ElMessage.success("删除成功");
			lodash.pullAt(baseColumnList.value, index)
		}
	});
}

// 打开符合条件弹窗
async function openConditionDialog(id?: number, sourceType?: string) {
	if (!id) {
	  ElMessage.warning("请先保存数据");
	  return
	}
	matchId.value = id
	conditionDialog.visible = true;
	conditionDialog.title = "基础字段符合条件配置";
	if (sourceType) {
	  conditionSourceType.value = sourceType
  }
	columnConditionList.value = []
	getColumnMatchConditionList(matchId.value, conditionSourceType.value).then((response) => {
		columnConditionList.value = response.data;
	});
}

// 在列表开头添加一行符合条件配置
function addColumnConditionRow() {
	const obj = reactive<ColumnMatchConditionVO>({
	  sourceType: conditionSourceType.value
	});
	columnConditionList.value.unshift(obj)
}

// 删除一行符合条件数据
function handleDeleteColumnCondition(index?: number) {
	const obj = lodash.nth(columnConditionList.value, index)
	ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		if (obj && obj.id) {
			deleteColumnMatchCondition(obj.id).then(() => {
					ElMessage.success("删除成功");
		  		lodash.pullAt(columnConditionList.value, index)
			});
		}else{
			ElMessage.success("删除成功");
			lodash.pullAt(columnConditionList.value, index)
		}
	});
}

// 关闭符合条件弹窗
function closeConditionDialog() {
	conditionDialog.visible = false
	const filterList = lodash.filter(columnConditionList.value, (o: ColumnMatchConditionVO) => o.sourceColumn)
	if (filterList.length > 0) {
		const baseColumn = lodash.find(baseColumnList.value, (o: BaseColumnMatchVO) => o.id === matchId.value)
		lodash.set(baseColumn, 'conditionFormList', filterList)
		saveColumnMatch(baseColumn)
			.then(() => {
			});
	}
}

// 获取账单项目列表
async function getBillColumnMatchListHandle() {
		getBillColumnMatchList(platformKey.value).then((response) => {
			billColumnList.value = response.data
			if (billColumnList.value.length > 0) {
				for(const obj of billColumnList.value) {
					lodash.set(obj, 'isUpdate', false)
				}
			}
		})
}

// 添加一行账单项目配置
function addBillProjectRow() {
	const obj = reactive<BillColumnMatchVO>({
		isUpdate: true,
		platformKey: platformKey.value,
		conditionFormList: [],
		standardColumn: '账单金额'
	});
	billColumnList.value.unshift(obj)
}

// 标准字段控件事件
function changeSourceColumn(sourceColumn?: string, index?: number) {
	const obj = lodash.nth(billColumnList.value, index)
	if (obj) {
		obj.originalBillProject = obj.sourceColumn
	}
}

// 保存账单项目配置
function saveBillColumn(index?: number) {
	const obj = lodash.nth(billColumnList.value, index)
	saveBillColumnMatch(obj)
		.then((response) => {
			obj.isUpdate = false
			obj.id = response.data
			ElMessage.success("保存成功");
		});
}

// 删除账单项目配置
function handleDeleteBillColumn(index?: number) {
	const obj = lodash.nth(billColumnList.value, index)
	ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		if (obj && obj.id) {
			deleteBillColumn(obj.id).then(() => {
				ElMessage.success("删除成功");
				lodash.pullAt(billColumnList.value, index)
			});
		}else{
			ElMessage.success("删除成功");
			lodash.pullAt(billColumnList.value, index)
		}
	});
}

// 打开符合条件弹窗
async function openBillConditionDialog(id?: number, sourceType?: string) {
	if (!id) {
		ElMessage.warning("请先保存数据");
		return
	}
	matchId.value = id
	billConditionDialog.visible = true;
	billConditionDialog.title = "账单项目符合条件配置";
	if (sourceType) {
		conditionSourceType.value = sourceType
	}
	billColumnConditionList.value = []
	getColumnMatchConditionList(matchId.value, conditionSourceType.value).then((response) => {
	  billColumnConditionList.value = response.data;
	});
}

// 在列表开头添加一行符合条件配置
function addBillColumnConditionRow() {
	const obj = reactive<ColumnMatchConditionVO>({
		sourceType: conditionSourceType.value
	});
	billColumnConditionList.value.unshift(obj)
}

// 删除一行符合条件数据
function handleDeleteBillColumnCondition(index?: number) {
	const obj = lodash.nth(billColumnConditionList.value, index)
	ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		if (obj && obj.id) {
			deleteColumnMatchCondition(obj.id).then(() => {
				ElMessage.success("删除成功");
				lodash.pullAt(billColumnConditionList.value, index)
			});
		}else{
			ElMessage.success("删除成功");
			lodash.pullAt(billColumnConditionList.value, index)
		}
	});
}

// 关闭符合条件弹窗
function closeBillConditionDialog() {
	conditionDialog.visible = false
	const filterList = lodash.filter(billColumnConditionList.value, (o: ColumnMatchConditionVO) => o.sourceColumn)
	if (filterList.length > 0) {
		const billColumn = lodash.find(billColumnList.value, (o: BaseColumnMatchVO) => o.id === matchId.value)
		lodash.set(billColumn, 'conditionFormList', filterList)
		saveBillColumnMatch(billColumn)
			.then(() => {
			});
	}
}

// 在列表开头添加一行合并列配置
function addColumnAppendRow() {
	const obj = reactive<ColumnAppendVO>({
		isUpdate: true,
		platformKey: platformKey.value,
	});
	columnAppendList.value.unshift(obj)
}

// 保存合并列配置
function saveColumnAppendHandle(index?: number) {
	const obj = lodash.nth(columnAppendList.value, index)
	obj.appendColumn = lodash.join(obj.appendColumnList, ',')
	saveColumnAppend(obj)
		.then((response) => {
			obj.isUpdate = false
			obj.id = response.data
			ElMessage.success("保存成功");
		});
}

// 获取合并列配置列表
async function getColumnAppend() {
	getColumnAppendList(platformKey.value).then((response) => {
		columnAppendList.value = response.data
		if (columnAppendList.value && columnAppendList.value.length > 0) {
			for (const columnAppend of columnAppendList.value) {
				lodash.set(columnAppend, 'isUpdate', false)
				if (columnAppend.appendColumn) {
			  	lodash.set(columnAppend, 'appendColumnList', columnAppend.appendColumn.split(','))
		  	}
			}
		}
	})
}

// 删除合并列配置
function handleDeleteColumnAppend(index?: number) {
	const obj = lodash.nth(columnAppendList.value, index)
	ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		if (obj && obj.id) {
			deleteColumnAppend(obj.id).then(() => {
				ElMessage.success("删除成功");
				lodash.pullAt(columnAppendList.value, index)
			});
		}else{
			ElMessage.success("删除成功");
			lodash.pullAt(columnAppendList.value, index)
		}
	});
}

// tab点击事件
function tabClick(e?: any) {
	if (e.props.name === 'three') {
		// 获取账单项目配置的记账项目字段列表+原始字段
		const filterList = lodash.filter(billColumnList.value, (o: BillColumnMatchVO) => o.id)
		billProjectList.value = lodash.map(filterList, (o: BillColumnMatchVO) => o.originalBillProject)
		for (const sourceColumn of sourceColumnList.value) {
			if (!billProjectList.value.includes(sourceColumn.value)) {
		  	billProjectList.value.push(sourceColumn.value)
			}
		}
	}
}

/**
 * Excel文件change事件
 *
 * @param file
 */
function handleExcelChange(file: UploadFile) {
	if (file.size !== undefined) {
		if (file.size > 20*1024*1024) {
			ElMessage.warning("上传文件大小已经超过20M，请尝试拆分成多个文件再上传");
			return false
		}
	}
	if (!/\.(csv|xlsx|xls|XLSX|XLS|CSV)$/.test(file.name)) {
		ElMessage.warning("上传Excel只能为xlsx、xls、csv格式");
		excelFile.value = undefined;
		excelFilelist.value = [];
		return false;
	}
	excelFile.value = file.raw;
}

// 关闭天猫账单配置弹窗
function closeTmBillDialog() {
	check(platformKey.value).then((response) => {
		if (response.data) {
			ElMessageBox.confirm(
				response.data,
				{
					confirmButtonText: '继续编辑',
					cancelButtonText: '暂时关闭',
					type: 'warning',
					closeOnClickModal: false,
					closeOnPressEscape: false
				}
			)
				.then(() => {})
				.catch(() => {
					tmBillDialog.visible = false;
				})
		}else{
			tmBillDialog.visible = false;
		}
	})
}

// 打开天猫账单配置弹窗
function openImportTmBillConfig() {
	tmBillImportDialog.visible = true;
}

// 关闭天猫账单配置弹窗
function closeTmBillImport() {
	tmBillImportDialog.visible = false;
	excelFile.value = undefined;
	excelFilelist.value = [];
	getBaseColumn()
}

function handleTmBillImport() {
	if (!excelFile.value) {
		ElMessage.warning("上传Excel文件不能为空");
		return false;
	}
	const importLoading = ElLoading.service({
		lock: true,
		text: '导入中...',
		background: 'rgba(0, 0, 0, 0.7)',
	})
	billImport(excelFile.value, platformKey.value).then((response) => {
	  closeTmBillImport();
		ElMessage.success('导入成功');
	}).finally(() => importLoading.close());
}

// 打开天猫账单配置弹窗
async function openTmBillDialog(platform, typeName, key) {
	if (platform && typeName) {
	  tmBillDialog.title = platform + typeName + "配置";
	} else {
	  tmBillDialog.title = "配置"
	}
	isBill.value = typeName === '账单'
	platformKey.value = key
	tmBillDialog.visible = true;
	activeTab.value = 'one'
	await getBaseColumn()
	if (isBill.value) {
		await getBillColumnMatchListHandle()
	}
}

function handleExportTmBill(){
	billExport(platformKey.value).then((response: any) => {
		const blob = new Blob([response.data], {
			type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
		});
		const a = document.createElement("a");
		const href = window.URL.createObjectURL(blob); // 下载的链接
		a.href = href;
		a.download = decodeURI(
			response.headers["content-disposition"].split(";")[1].split("=")[1]
		); // 获取后台设置的文件名称
		document.body.appendChild(a);
		a.click(); // 点击导出
		document.body.removeChild(a); // 下载完成移除元素
		window.URL.revokeObjectURL(href); // 释放掉blob对象
	});
}

// 打开天猫账单符合条件弹窗
async function openTmBillConditionDialog(id?: number, sourceType?: string, dialogTitle: any) {
	if (!id) {
		ElMessage.warning("请先保存数据");
		return
	}
	matchId.value = id
	tmBillConditionDialog.visible = true;
	tmBillConditionDialog.title = dialogTitle+"符合条件";
	if (sourceType) {
		conditionSourceType.value = sourceType
	}
	columnConditionList.value = []
	getColumnMatchConditionList(matchId.value, conditionSourceType.value).then((response) => {
		columnConditionList.value = response.data;
	});
}

function getConditionText(conditionValue) {
	if (conditionValue === 'eq') {
		return '等于'
	}else if (conditionValue === 'include') {
		return '包含'
	}else if (conditionValue === 'ne') {
		return '不等于'
	}else if (conditionValue === 'startswith') {
		return '以XX开头'
	}else if (conditionValue === 'endswith') {
		return '以XX结尾'
	}
	return ''
}

// 打开百胜OMS交易号配置弹窗
function openBsOmsDialog(platformName, platformValue){
	bsOmsDialog.title = '【' + platformName + '】百胜OMS交易号配置'
	bsOmsDialog.visible = true;
	platformKey.value = platformValue
	getSysMainSubNoConfigForm(platformValue).then((response) => {
		Object.assign(bsOmsForm, response.data)
	})
	getDictOptions(platformValue + 'order').then((response) => {
		sourceColumnList.value = response.data;
	});
}

// 保存百胜OMS交易号配置
function handleBsOmsSubmit() {
	bsOmsFormRef.value.validate((valid: any) => {
		if (valid) {
			lodash.set(bsOmsForm, 'preform', platformKey.value)
			saveSysMainSubNoConfig(bsOmsForm).then((response) => {
				ElMessage.success("保存成功");
				closeBsOmsDialog();
			});
		}
  })
}

function closeBsOmsDialog() {
	bsOmsDialog.visible = false;
	sourceColumnList.value = []
	platformKey.value = undefined
}

// 打开导入账单项目配置弹窗
function openImportBillProjectConfig() {
	billProjectImportDialog.visible = true
	billProjectImportDialog.title = '导入账单项目配置'
}

// 关闭导入账单项目配置弹窗
function closeBillProjectImport() {
	billProjectImportDialog.visible = false
	excelFile.value = undefined;
	excelFilelist.value = [];
	getBillColumnMatchListHandle()
}

// 导入账单项目配置
function handleBillProjectImport() {
	if (!excelFile.value) {
		ElMessage.warning("上传Excel文件不能为空");
		return false;
	}
	const importLoading = ElLoading.service({
		lock: true,
		text: '导入中...',
		background: 'rgba(0, 0, 0, 0.7)',
	})
	billColumnMatchImport(excelFile.value, platformKey.value).then((response) => {
	  closeBillProjectImport();
		ElMessage.success('导入成功');
	}).finally(() => importLoading.close());
}

// 导出账单项目配置
function handleExportBillProject() {
	billColumnMatchExport(platformKey.value).then((response: any) => {
		const blob = new Blob([response.data], {
			type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
		});
		const a = document.createElement("a");
		const href = window.URL.createObjectURL(blob); // 下载的链接
		a.href = href;
		a.download = decodeURI(
			response.headers["content-disposition"].split(";")[1].split("=")[1]
		); // 获取后台设置的文件名称
		document.body.appendChild(a);
		a.click(); // 点击导出
		document.body.removeChild(a); // 下载完成移除元素
		window.URL.revokeObjectURL(href); // 释放掉blob对象
	});
}

onMounted(() => {
	// 根据字典类型编码(typeCode)获取字典选项
	getDictOptions('platform').then((response) => {
		options.value = response.data;
	});
});
</script>

<template>
  <div class="app-container">
	  <el-card v-for="option in options" class="box-card" style="float: left;margin-right: 5px;">
		  <template #header>
			  <div class="card-header">
				  <span>{{option.label}}</span>
			  </div>
		  </template>
		  <div>
				<el-button type="primary" @click="openTmBillDialog(option.label,'账单', option.value + 'bill')">账单配置</el-button>
			</div>
			<div style="margin-top: 10px">
				<el-button type="primary" @click="openTmBillDialog(option.label, '订单', option.value + 'order')">订单配置</el-button>
			</div>
			<div style="margin-top: 10px;">
				<el-button type="primary" @click="openBsOmsDialog(option.label, option.value)">主/子单号配置</el-button>
			</div>
	  </el-card>

		<!--公共账单配置-->
	  <el-dialog
			  v-model="dialog.visible"
			  :title="dialog.title"
			  width="900px"
			  :close-on-click-modal="false"
			  :before-close="closeDialog"
	  >
		  <el-form
				  ref="dataFormRef"
				  label-width="160px"
		  >
			  <el-tabs type="border-card" v-model="activeTab" @tab-click="tabClick">
				  <el-tab-pane label="基础字段配置" name="one">
			  		<el-card shadow="never" >
						  <div style="margin-bottom: 10px" class="flex justify-between">
							  <div>
								  <el-button type="primary" @click="addBaseColumnRow"><i-ep-plus />新增</el-button>
							  </div>
						  </div>
						  <el-table
					  			row-style="height: 41px;"
								  size="small"
								  :header-row-style="{color: 'dimgray'}"
								  border
				  				:data="baseColumnList"
						  >
							  <el-table-column
									  label="原始字段"
									  align="center" show-overflow-tooltip
							  >
									<template #default="scope">
										<el-select class="yz-el-select" v-if="scope.row.isUpdate" v-model="scope.row.sourceColumn" placeholder="请选择原始字段" filterable clearable>
											<el-option
													v-for="item in sourceColumnList"
													:key="item.value"
													:label="item.label"
													:value="item.value"
											/>
										</el-select>
										<span v-else>{{scope.row.sourceColumn}}</span>
									</template>
								</el-table-column>
							  <el-table-column
									  label="标准字段"
									  align="center" show-overflow-tooltip
							  >
									<template #default="scope">
										<el-select class="yz-el-select" v-if="scope.row.isUpdate" v-model="scope.row.standardColumn" placeholder="请选择标准字段" filterable clearable>
											<el-option
													v-for="item in standardColumnList.value"
													:key="item"
													:label="item"
													:value="item"
											/>
										</el-select>
					  				<span v-else>{{scope.row.standardColumn}}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" fixed="right">
									<template #default="scope">
										<el-button
											v-if="scope.row.isUpdate"
											type="primary"
											size="small"
											@click="saveBaseColumn(scope.$index)"
										>保存</el-button>
											<el-button type="primary" size="small" v-if="!scope.row.isUpdate" @click="scope.row.isUpdate = true">编辑</el-button>
										<el-button
												type="primary"
												size="small"
												@click="openConditionDialog(scope.row.id, 'base')"
										>符合条件</el-button>
										<el-button
												type="primary"
												size="small"
												@click="handleDeleteBaseColumn(scope.$index)"
										><i-ep-delete/>删除</el-button>
									</template>
								</el-table-column>
						  </el-table>
						</el-card>
				  </el-tab-pane>
				  <el-tab-pane v-if="isBill" label="账单项目配置" name="two">
						<el-card shadow="never" >
							<div style="margin-bottom: 10px" class="flex justify-between">
								<div>
									<el-button type="primary" @click="addBillProjectRow"><i-ep-plus />新增</el-button>
								</div>
							</div>
							<el-table
									row-style="height: 41px;"
									size="small"
									:header-row-style="{color: 'dimgray'}"
									border
									:data="billColumnList"
							>
								<el-table-column
										label="原始字段"
										align="center" show-overflow-tooltip
								>
									<template #default="scope">
										<el-select class="yz-el-select" v-if="scope.row.isUpdate" v-model="scope.row.sourceColumn" placeholder="请选择原始字段" filterable clearable @change="changeSourceColumn">
											<el-option
													v-for="item in sourceColumnList"
													:key="item.value"
													:label="item.label"
													:value="item.value"
											/>
										</el-select>
										<span v-else>{{scope.row.sourceColumn}}</span>
									</template>
								</el-table-column>
								<el-table-column
										label="标准字段"
										align="center" show-overflow-tooltip
								>
									<template #default="scope">
										<span>{{scope.row.standardColumn}}</span>
									</template>
								</el-table-column>
								<el-table-column
									label="电商平台账单项目"
									align="center" show-overflow-tooltip
								>
									<template #default="scope">
										<el-input v-if="scope.row.isUpdate" v-model="scope.row.originalBillProject" clearable></el-input>
										<span v-else>{{scope.row.originalBillProject}}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" fixed="right" width="250">
									<template #default="scope">
										<el-button
												v-if="scope.row.isUpdate"
												type="primary"
												size="small"
												@click="saveBillColumn(scope.$index)"
										>保存</el-button>
										<el-button type="primary" size="small" v-if="!scope.row.isUpdate" @click="scope.row.isUpdate = true">编辑</el-button>
										<el-button
												type="primary"
												size="small"
												@click="openBillConditionDialog(scope.row.id, 'project')"
										>符合条件</el-button>
										<el-button
												type="primary"
												size="small"
												@click="handleDeleteBillColumn(scope.$index)"
										><i-ep-delete/>删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
				  </el-tab-pane>
				  <el-tab-pane v-if="isBill" label="合并列配置" name="three">
			  		<el-card shadow="never" >
							<div style="margin-bottom: 10px" class="flex justify-between">
								<div>
									<el-button type="primary" @click="addColumnAppendRow"><i-ep-plus />新增</el-button>
								</div>
							</div>
							<el-table
									row-style="height: 41px;"
									size="small"
									:header-row-style="{color: 'dimgray'}"
									border
									:data="columnAppendList"
							>
								<el-table-column
										label="电商平台账单项目"
										width="180"
										align="center" show-overflow-tooltip
								>
									<template #default="scope">
											<el-select class="yz-el-select" v-if="scope.row.isUpdate" v-model="scope.row.originalBillProject" clearable placeholder="请选择电商平台账单项目">
													<el-option label="退款金额" value="退款金额"/>
													<el-option label="保证金退款" value="保证金退款"/>
											</el-select>
										<span v-else>{{scope.row.originalBillProject}}</span>
									</template>
								</el-table-column>
								<el-table-column
										label="需要合并的列"
										align="center" show-overflow-tooltip
								>
									<template #default="scope">
										<el-select class="yz-el-select"  v-if="scope.row.isUpdate" v-model="scope.row.appendColumnList" filterable multiple placeholder="请选择记账项目">
											<el-option
													v-for="item in billProjectList.value"
													:key="item"
													:label="item"
													:value="item"
											/>
										</el-select>
										<span v-else>{{scope.row.appendColumn}}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" fixed="right" width="140">
									<template #default="scope">
										<el-button
												v-if="scope.row.isUpdate"
												type="primary"
												size="small"
												@click="saveColumnAppendHandle(scope.$index)"
										>保存</el-button>
										<el-button type="primary" size="small" v-if="!scope.row.isUpdate" @click="scope.row.isUpdate = true">编辑</el-button>
										<el-button
												type="primary"
												size="small"
												@click="handleDeleteColumnAppend(scope.$index)"
										><i-ep-delete/>删除</el-button>
									</template>
								</el-table-column>
							</el-table>
			  		</el-card>
				  </el-tab-pane>
			  </el-tabs>

		  </el-form>
	  </el-dialog>

		<!--基础字段配置符合条件弹窗-->
	  <el-dialog
			  v-model="conditionDialog.visible"
			  :title="conditionDialog.title"
			  width="700px"
				draggable
			  :close-on-click-modal="false"
			  @close="closeConditionDialog"
	  >
		<el-card shadow="never" >
			<div style="margin-bottom: 10px" class="flex justify-between">
				<div>
					<el-button type="primary" @click="addColumnConditionRow"><i-ep-plus />新增</el-button>
				</div>
			</div>
			<el-table
					row-style="height: 41px;"
					size="small"
					:header-row-style="{color: 'dimgray'}"
					border
					:data="columnConditionList"
			>
				<el-table-column
						label="原始字段"
						align="center" show-overflow-tooltip
				>
					<template #default="scope">
						<el-select class="yz-el-select" v-model="scope.row.sourceColumn" placeholder="请选择原始字段" filterable clearable>
							<el-option
									v-for="item in sourceColumnList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
							/>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column
						label="条件"
						align="center" show-overflow-tooltip
				>
					<template #default="scope">
						<el-select class="yz-el-select" v-model="scope.row.conditionType" placeholder="请选择条件" clearable>
							<el-option label="等于" value="eq"/>
							<el-option label="包含" value="include"/>
							<el-option label="不等于" value="ne"/>
							<el-option label="以XX开头" value="startswith"/>
							<el-option label="以XX结尾" value="endswith"/>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="比较值" align="center" show-overflow-tooltip>
					<template #default="scope">
							<el-input v-model="scope.row.conditionValue" placeholder="请输入比较值" clearable/>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="100">
					<template #default="scope">
						<el-button
								type="primary"
								size="small"
								@click="handleDeleteColumnCondition(scope.$index)"
						><i-ep-delete/>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	  </el-dialog>

	  <!--账单项目配置符合条件弹窗-->
	  <el-dialog
			  v-model="billConditionDialog.visible"
			  :title="billConditionDialog.title"
			  width="700px"
				draggable
			  :close-on-click-modal="false"
			  @close="closeBillConditionDialog"
	  >
		  <el-card shadow="never" >
			  <div style="margin-bottom: 10px" class="flex justify-between">
				  <div>
					  <el-button type="primary" @click="addBillColumnConditionRow"><i-ep-plus />新增</el-button>
				  </div>
			  </div>
			  <el-table
					  row-style="height: 41px;"
					  size="small"
					  :header-row-style="{color: 'dimgray'}"
					  border
					  :data="billColumnConditionList"
			  >
				  <el-table-column
						  label="原始字段"
						  align="center" show-overflow-tooltip
				  >
					  <template #default="scope">
						  <el-select class="yz-el-select" v-model="scope.row.sourceColumn" placeholder="请选择原始字段" filterable clearable>
							  <el-option
									  v-for="item in sourceColumnList"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value"
							  />
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column
						  label="条件"
						  align="center" show-overflow-tooltip
				  >
					  <template #default="scope">
						  <el-select class="yz-el-select" v-model="scope.row.conditionType" placeholder="请选择条件" clearable>
								<el-option label="等于" value="eq"/>
								<el-option label="包含" value="include"/>
								<el-option label="不等于" value="ne"/>
								<el-option label="以XX开头" value="startswith"/>
								<el-option label="以XX结尾" value="endswith"/>
						  </el-select>
					  </template>
				  </el-table-column>
				  <el-table-column label="比较值" align="center" show-overflow-tooltip>
					  <template #default="scope">
						  <el-input v-model="scope.row.conditionValue" placeholder="请输入比较值" clearable/>
					  </template>
				  </el-table-column>
				  <el-table-column label="操作" fixed="right" width="100">
					  <template #default="scope">
						  <el-button
								  type="primary"
								  size="small"
								  @click="handleDeleteBillColumnCondition(scope.$index)"
						  ><i-ep-delete/>删除</el-button>
					  </template>
				  </el-table-column>
			  </el-table>
		  </el-card>
	  </el-dialog>

	  <!--账单配置-->
	  <el-dialog
			  v-model="tmBillDialog.visible"
			  :title="tmBillDialog.title"
			  width="900px"
			  :close-on-click-modal="false"
			  :before-close="closeTmBillDialog"
	  >
		  <el-form
				  ref="dataFormRef"
				  label-width="160px"
		  >
			  <el-tabs type="border-card" v-model="activeTab" @tab-click="tabClick">
				  <el-tab-pane label="基础字段配置" name="one">
					  <el-card shadow="never" >
						  <div style="margin-bottom: 10px" class="flex justify-between">
							  <div>
								  <el-button type="primary" @click="openImportTmBillConfig" v-hasPerm="['sys:baseColumnMatch:billConfigImport']">导入</el-button>
								  <el-button type="primary" @click="handleExportTmBill" v-hasPerm="['sys:baseColumnMatch:billConfigExport']">导出</el-button>
							  </div>
						  </div>
						  <el-table
								  row-style="height: 41px;"
								  size="small"
								  :header-row-style="{color: 'dimgray'}"
								  border
								  :data="baseColumnList"
				  				default-expand-all
						  >
								<el-table-column
										v-if="isBill"
										align="center" show-overflow-tooltip
										type="expand"
								>
									<template #default="props">
										<div style="display: flex;align-items: center;justify-content: center">
											<el-table
												v-if="props.row.dataGeneration === '通过计算'"
												style="width: 500px; display: flex;align-items: center;"
												:data="props.row.calculateColumnList"
												border
												:header-row-style="{color: 'dimgray'}"
											>
												<el-table-column label="计算规则" width="100" prop="calculateRule" align="center" show-overflow-tooltip/>
												<el-table-column label="原始单据类型" width="150" prop="billType" show-overflow-tooltip/>
												<el-table-column label="原始字段" prop="sourceColumn" show-overflow-tooltip/>
												<el-table-column label="操作" width="120" fixed="right" align="center">
													<template #default="subScope">
														<el-button
																type="primary"
																size="small"
																@click="openTmBillConditionDialog(subScope.row.id, 'base', '基础字段配置')"
														>符合条件</el-button>
													</template>
												</el-table-column>
											</el-table>
										</div>
									</template>
								</el-table-column>
							  <el-table-column
									  label="数据生成方式"
									  align="center" show-overflow-tooltip
										v-if="isBill"
										prop="dataGeneration"
							  />
							  <el-table-column
									  label="原始单据类型"
										v-if="isBill"
									  align="center" show-overflow-tooltip
										prop="billType"
							  />
							  <el-table-column
									  label="原始单据字段"
									  align="center" show-overflow-tooltip
										prop="sourceColumn"
							  />
							  <el-table-column
									  label="标准字段"
									  align="center" show-overflow-tooltip
										prop="standardColumn"
							  />
							  <el-table-column label="操作" width="120" fixed="right" align="center">
								  <template #default="scope">
									  <el-button
												v-if="scope.row.dataGeneration !== '通过计算'"
											  type="primary"
											  size="small"
											  @click="openTmBillConditionDialog(scope.row.id, 'base', '基础字段配置')"
									  >符合条件</el-button>
								  </template>
							  </el-table-column>
						  </el-table>
					  </el-card>
				  </el-tab-pane>
				  <el-tab-pane v-if="isBill" label="账单项目配置" name="two">
					  <el-card shadow="never" >
						  <div style="margin-bottom: 10px" class="flex justify-between">
							  <div>
									<el-button type="primary" @click="openImportBillProjectConfig" v-hasPerm="['sys:billColumnMatch:billConfigImport']">导入</el-button>
									<el-button type="primary" @click="handleExportBillProject" v-hasPerm="['sys:billColumnMatch:billConfigExport']">导出</el-button>
							  </div>
						  </div>
						  <el-table
								  row-style="height: 41px;"
								  size="small"
								  :header-row-style="{color: 'dimgray'}"
								  border
								  :data="billColumnList"
						  >
							  <el-table-column
									  label="原始账单单据类型"
									  align="center" show-overflow-tooltip
										prop="billType"
										width="120"
							  />
							  <el-table-column
									  label="原始字段"
									  align="center" show-overflow-tooltip
										prop="sourceColumn"
							  />
							  <el-table-column
									  label="标准字段"
									  align="center" show-overflow-tooltip
										width="120"
										prop="standardColumn"
							  />
							  <el-table-column
									  label="电商平台账单项目"
									  align="center" show-overflow-tooltip
										prop="originalBillProject"
							  />
								<el-table-column
									label="账单辅助条件"
									align="center" show-overflow-tooltip
								>
									<template #default="scope">
										<span>{{scope.row.billCheckName}}</span>
									</template>
								</el-table-column>
							  <el-table-column label="操作" fixed="right" width="120" align="center">
								  <template #default="scope">
									  <el-button
											  type="primary"
											  size="small"
											  @click="openTmBillConditionDialog(scope.row.id, 'project', '账单项目配置')"
									  >符合条件</el-button>
									</template>
							  </el-table-column>
						  </el-table>
					  </el-card>
				  </el-tab-pane>
			  </el-tabs>

		  </el-form>
	  </el-dialog>

	  <!--账单基础字段配置符合条件弹窗-->
	  <el-dialog
			  v-model="tmBillConditionDialog.visible"
			  :title="tmBillConditionDialog.title"
			  width="800px"
			  draggable
			  :close-on-click-modal="false"
			  @close="tmBillConditionDialog.visible = false"
	  >
		  <el-card shadow="never" >
			  <el-table
					  row-style="height: 41px;"
					  size="small"
					  :header-row-style="{color: 'dimgray'}"
					  border
					  :data="columnConditionList"
			  >
				  <el-table-column
						  label="条件"
						  align="center" show-overflow-tooltip
							prop="conditions"
				  />
				  <el-table-column
						  label="变量"
						  align="center" show-overflow-tooltip
							width="200"
							prop="params"
				  />
			  </el-table>
		  </el-card>
	  </el-dialog>

	  <!-- 账单基础配置导入弹窗 -->
	  <el-dialog
			  v-model="tmBillImportDialog.visible"
			  :title="tmBillImportDialog.title"
			  width="600px"
			  append-to-body
			  @close="closeTmBillImport"
	  >
		  <el-form label-width="80px">

			  <el-form-item label="Excel">
				  <el-upload
						  class="upload-demo"
						  action=""
						  drag
						  :auto-upload="false"
						  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
						  :file-list="excelFilelist"
						  :on-change="handleExcelChange"
						  :limit="1"
				  >
					  <el-icon class="el-icon--upload">
						  <i-ep-upload-filled />
					  </el-icon>
					  <div class="el-upload__text">
						  将文件拖到此处，或
						  <em>点击上传</em>
					  </div>
					  <template #tip>
						  <div class="el-upload__tip">xls/xlsx files</div>
					  </template>
				  </el-upload>
			  </el-form-item>
		  </el-form>
		  <template #footer>
			  <div class="dialog-footer">
				  <el-button type="primary" @click="handleTmBillImport">确 定</el-button>
				  <el-button @click="closeTmBillImport">取 消</el-button>
			  </div>
		  </template>
	  </el-dialog>

	  <!-- 账单项目配置导入弹窗 -->
	  <el-dialog
			  v-model="billProjectImportDialog.visible"
			  :title="billProjectImportDialog.title"
			  width="600px"
			  append-to-body
			  @close="closeBillProjectImport"
	  >
		  <el-form label-width="80px">

			  <el-form-item label="Excel">
				  <el-upload
						  class="upload-demo"
						  action=""
						  drag
						  :auto-upload="false"
						  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
						  :file-list="excelFilelist"
						  :on-change="handleExcelChange"
						  :limit="1"
				  >
					  <el-icon class="el-icon--upload">
						  <i-ep-upload-filled />
					  </el-icon>
					  <div class="el-upload__text">
						  将文件拖到此处，或
						  <em>点击上传</em>
					  </div>
					  <template #tip>
						  <div class="el-upload__tip">xls/xlsx files</div>
					  </template>
				  </el-upload>
			  </el-form-item>
		  </el-form>
		  <template #footer>
			  <div class="dialog-footer">
				  <el-button type="primary" @click="handleBillProjectImport">确 定</el-button>
				  <el-button @click="closeBillProjectImport">取 消</el-button>
			  </div>
		  </template>
	  </el-dialog>

		<!--百胜OMS交易号配置弹窗-->
	  <el-dialog
			  v-model="bsOmsDialog.visible"
			  :title="bsOmsDialog.title"
			  width="600px"
			  append-to-body
			  @close="closeBsOmsDialog"
	  >
		  <el-form ref="bsOmsFormRef" label-width="80px" :rules="bsOmsRules" :model="bsOmsForm">
			  <el-form-item label="主订单号" prop="sourcePreformMainNo">
					<el-select class="yz-el-select" v-model="bsOmsForm.sourcePreformMainNo" placeholder="请选择">
						<el-option
								v-for="item in sourceColumnList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
						/>
					</el-select>
			  </el-form-item>
			  <el-form-item label="子订单号" prop="sourcePreformSubNo">
					<el-select class="yz-el-select" v-model="bsOmsForm.sourcePreformSubNo" placeholder="请选择">
						<el-option
								v-for="item in sourceColumnList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
						/>
					</el-select>
			  </el-form-item>
		  </el-form>
		  <template #footer>
			  <div class="dialog-footer">
				  <el-button type="primary" @click="handleBsOmsSubmit">确 定</el-button>
				  <el-button @click="closeBsOmsDialog">取 消</el-button>
			  </div>
		  </template>
	  </el-dialog>
  </div>
</template>
